<template>
  <div class="login">
    <div class="login-text">登录</div>
    <div class="login-tal">
      <span class="login-tvuser"> phone </span>

      <input type="phone" placeholder="请输入手机号" v-model="phone" />
    </div>
    <!-- end phone -->
    <div class="login-tal" v-if="isShow">
      <span class="login-tvuser"> Captcha </span>
      <input type="number" placeholder="请输入验证码" v-model="captcha" />
      <span class="login-captcha" @click="getSmsClick">{{ smsText }}</span>
    </div>
    <!-- end -->

    <div v-else>
      <div class="login-tal">
        <span class="login-tvuser"> Password </span>
        <input
          :type="isinputType ? 'password' : 'text'"
          placeholder="请输入密码"
          v-model="password"
        />
        <img
          :src="isinputType ? closeEyes : openEyes"
          width="17"
          height="17"
          @click="imgClick"
        />
      </div>
      <!-- end password -->

      <div class="remember-the-pwd">
        <div class="remember-the-pwd-left" @click="rememberPwd">
          <img
            :src="isRememberPwd ? rememberPwdimgyes : rememberPwdimgno"
            width="13"
            height="13"
            alt=""
          />
          <div>记住密码</div>
        </div>
        <div class="remember-the-pwd-right" @click="forgetPassword">
          忘记密码
        </div>
      </div>
      <!-- end remember -->
    </div>
    <div class="loginbtn" @click="nextClcik">登录</div>
    <!-- end login -->
    <div class="remember-the-pwd">
      <div class="remember-the-pwd-left" v-if="isShow" @click="isShowClick">
        账号密码登录
      </div>
      <div class="remember-the-pwd-left" v-else @click="isShowClick">
        短信验证码登录
      </div>
      <div class="remember-the-pwd-right" @click="registerClick">
        新用户注册
      </div>
    </div>
    <!-- end 短信验证码登录 新用户注册  -->
    <div class="login-bottom">
      登录即代表您已经同意
      <span>《XX用户使用协议》</span>
    </div>
  </div>
</template>
<script>
import { getApiSms, getApiSmsLogin, getApiLogin } from "../network/ApiServe";
export default {
  name: "Login",
  created() {
    if (this.isRememberPwd) {
      this.phone = localStorage.getItem("phone");
      this.password = localStorage.getItem("password");
    }
  },
  data() {
    return {
      smsText: "获取验证码",
      phone: "",
      password: "",
      captcha: "",
      isShow: true,
      isinputType: true,
      closeEyes: require("assets/image/icon_close_your_eyes.png"),
      openEyes: require("assets/image/icon_open_your_eyes.png"),
      isRememberPwd: true,
      rememberPwdimgyes: require("assets/image/icon_remember_pwd_yes.png"),
      rememberPwdimgno: require("assets/image/icon_remember_pwd_no.png"),
    };
  },
  methods: {
    nextClcik() {
      if (this.phone.length != 11) {
        return this.$toast("手机号码不能为空或者手机格式不正确");
      }
      if (this.isShow) {
        // 验证码登录
        if (this.captcha.length == 0) {
          return this.$toast("请输入验证码");
        }
        getApiSmsLogin(this.phone.trim(), this.captcha.trim())
          .then((res) => {
            console.log(res);
            this.$toast(res.resp_message);
            if (res.resp_code == "000000") {
              this.$router.push("home");
              this.getStorage(res);
            }
          })
          .catch((err) => {
            console.log(err, "getApiSmsLogin");
          });
      } else {
        // 密码登录
        getApiLogin(this.phone.trim(), this.password.trim())
          .then((res) => {
            console.log(res, "getApiLogin");

            if (res.resp_code == "000000") {
              this.$router.push("home");
              this.getStorage(res);
            } else {
              this.$toast(res.resp_message);
            }
          })
          .catch((err) => {
            console.log(err, "getApiLogin");
          });
        // 是否记住密码
        if (this.isRememberPwd) {
          localStorage.setItem("phone", this.phone);
          localStorage.setItem("password", this.password);
        } else {
          localStorage.setItem("phone", "");
          localStorage.setItem("password", "");
        }
      }
    },

    getStorage(res) {
      localStorage.setItem("token", res.result.userToken);
      localStorage.setItem("userId", res.result.id);
      localStorage.setItem("brandId", res.result.brandId);
      localStorage.setItem("phone", res.result.phone);
      localStorage.setItem("city", res.result.city);
      localStorage.setItem("preUserPhone", res.result.preUserPhone);
      localStorage.setItem("appName", res.result.brandname);
    },
    getSmsClick() {
      if (this.phone.length != 11) {
        return this.$toast("手机号码不能为空或者手机格式不正确");
      }
      let timeSS = 61;
      let clearTime = setInterval(() => {
        timeSS--;
        if (timeSS == 0) {
          clearInterval(clearTime);
          this.smsText = "获取验证码";
          return;
        }
        this.smsText = timeSS + "s";
      }, 1000);
      getApiSms(this.phone.trim())
        .then((res) => {
          this.$toast(res.resp_message);
        })
        .catch((err) => {
          console.log(err, "getApiSms");
        });
    },
    imgClick() {
      this.isinputType = !this.isinputType;
    },
    rememberPwd() {
      this.isRememberPwd = !this.isRememberPwd;
    },
    isShowClick() {
      this.isShow = !this.isShow;
    },
    registerClick() {
      this.$router.push("register");
    },
    forgetPassword() {
      this.$router.push("forgetPassword");
    },
  },
};
</script>
<style scoped>
.login {
  margin-left: 37px;
  margin-right: 37px;
}
.login-text {
  margin-top: 111px;
  padding-bottom: 12px;
  text-align: center;
  font-size: 24px;
  color: var(--app-color-3);
  font-weight: 500;
}

.login-tal {
  margin-top: 25px;
  height: 44px;
  display: flex;
  align-content: center;
  border: 1px solid var(--app-color-ef);
  border-radius: 24px;
  position: relative;
  align-items: center;
}
.login-tvuser {
  position: absolute;
  font-size: 0.32rem;
  color: #b8c4d1;
  top: -6px;
  left: 24px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #f7f7f7;
}
.login-tal input {
  color: var(--app-color-4);
  outline: none;
  border: 0px;
  font-size: 14px;
  margin-left: 25px;
  background-color: #f7f7f7;
  flex: 1;
}
.login-tal img {
  margin-left: 20px;
  margin-right: 20px;
}
.remember-the-pwd {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
  color: var(--app-color-6);
}
.remember-the-pwd-left {
  display: flex;
}
.remember-the-pwd-left img {
  margin-right: 3px;
}
.login-captcha {
  color: var(--app-primary-theme-color);
  font-size: 12px;
  margin-left: 10px;
  margin-right: 10px;
}

.loginbtn {
  margin-top: 35px;
  height: 44px;
  line-height: 44px;
  border-radius: 24px;
  font-size: 18px;
  background-color: var(--app-primary-theme-lighter-color);
  color: var(--app-color-f);
  text-align: center;
}
.login-bottom {
  margin-top: 188px;
  color: var(--app-color-4);
  text-align: center;
  font-size: 13px;
}
.login-bottom span {
  color: var(--app-primary-theme-color);
}
.register-border span {
  display: block;
}
</style>